import MyNavBar from '../../components/navbar'
import { Form, Input, Button, Toast } from 'antd-mobile'
import { EyeInvisibleOutline, EyeOutline } from 'antd-mobile-icons'
import { useState } from 'react'
// 导入注册的接口
import { regApi } from '../../api/user'
import { useNavigate } from 'react-router-dom'
// 导入自定义的 Hook
// import { useCountDown } from '../../hooks'
import styles from './css/reg.module.css'

function Reg() {
  // 创建表单的引用对象，但是默认值是空的，并没有引用任何实际的表单
  const [form] = Form.useForm()
  const [visible, setVisible] = useState(false)
  const [visible2, setVisible2] = useState(false)
  const nav = useNavigate()

  // const {count, isDown, start} = useCountDown(10)
  // const { count, start, isDown } = useCountDown(10)

  // 提交表单时候触发的函数，形参中的 values 就是表单中所有的数据
  const onFinish = async (values) => {
    // 调用接口
    await regApi(values)
    // 注册成功，展示成功的消息
    Toast.show({
      icon: 'success',
      content: '注册成功！'
    })
  }

  return (
    <div className={styles.box}>
      <MyNavBar title="注册账号" />

      {/* 注册的表单 */}
      <Form
        onFinish={onFinish}
        style={{ '--prefix-width': '80px' }}
        form={form}
        layout="horizontal"
        mode="card"
        // 底部的按钮
        footer={
          <div>
            <Button
              block
              type="submit"
              color="primary"
              shape="rounded"
            >
              注册
            </Button>
            <Button
              style={{ marginTop: '15px' }}
              block
              type="button"
              color="warning"
              shape="rounded"
              onClick={() => nav('/login')}
            >
              登录
            </Button>
          </div>
        }
      >
        <Form.Item
          label="账号"
          name="username"
          validateFirst
          rules={[{ required: true, message: '账号不能为空！' }]}
        >
          <Input placeholder="请输入账号" />
        </Form.Item>
        <Form.Item
          label="密码"
          name="password"
          validateFirst
          extra={
            <div>
              {!visible ? (
                <EyeInvisibleOutline onClick={() => setVisible(true)} />
              ) : (
                <EyeOutline onClick={() => setVisible(false)} />
              )}
            </div>
          }
          rules={[
            { required: true, message: '账号不能为空！' },
            {
              pattern: /^(?!\d+$)(?![a-zA-Z]+$)[a-zA-Z0-9]{6,15}$/,
              message: '密码必须是6-15位的字母数字'
            }
          ]}
        >
          <Input
            placeholder="请输入密码"
            type={visible ? 'text' : 'password'}
          />
        </Form.Item>
        <Form.Item
          label="确认密码"
          name="repassword"
          // 1. 触发重新校验的依赖项是谁，就把谁的 name 值填过来
          dependencies={['password']}
          validateFirst
          extra={
            <div>
              {!visible2 ? (
                <EyeInvisibleOutline onClick={() => setVisible2(true)} />
              ) : (
                <EyeOutline onClick={() => setVisible2(false)} />
              )}
            </div>
          }
          rules={[
            { required: true, message: '账号不能为空！' },
            {
              pattern: /^(?!\d+$)(?![a-zA-Z]+$)[a-zA-Z0-9]{6,15}$/,
              message: '密码必须是6-15位的字母数字'
            },
            // validator 函数，是自定义的“校验器函数”
            {
              validator(_, p2) {
                const p1 = form.getFieldValue('password')
                if (p1 === p2) {
                  // 校验通过
                  return Promise.resolve()
                } else {
                  // 校验不通过
                  return Promise.reject()
                }
              },
              message: '两次密码不一致！'
            }
          ]}
        >
          <Input
            placeholder="请输入密码"
            type={visible2 ? 'text' : 'password'}
          />
        </Form.Item>
      </Form>

      {/* <hr /> */}

      {/* <Button
        block
        color="primary"
        disabled={isDown}
        onClick={() => start()}
      >
        {isDown ? `${count}s后重新发送` : '发送验证码'}
      </Button> */}
    </div>
  )
}

export default Reg
